<template>
  <div>
    <form @submit.prevent="rangeform">
      <div class="basic-content">
        <div class="form-group">
          <h4 class="card-title">基础信息</h4>
        </div>
        <div class="form-group">
          <label for="productname">信源名称</label>
          <b-form-input
            for="text"
            v-model="basicContent.name"
            placeholder="信源名称*(必填)"
            :class="{
              'is-invalid': submit && $v.basicContent.name.$error,
            }"
          ></b-form-input>
          <div
            v-if="submit && $v.basicContent.name.$error"
            class="invalid-feedback"
          >
            <span v-if="!$v.basicContent.name.required"
              >该值是必需的。</span
            >
            <span v-if="!$v.basicContent.name.minLength"
              >这个值太短了。它应该有 6 个字符或更多。</span
            >
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4">
            <div class="form-group">
              <label for="manufacturerbrand">信源网址</label>
              <b-form-input
                for="text"
                v-model="basicContent.address"
                placeholder="信源网址*(必填)"
                :class="{
                  'is-invalid': submit && $v.basicContent.address.$error,
                }"
              ></b-form-input>
              <div
                v-if="submit && $v.basicContent.address.$error"
                class="invalid-feedback"
              >
                <span v-if="!$v.basicContent.address.required"
                  >该值是必需的。</span
                >
              </div>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="form-group">
              <label for="price">信源类型</label>
              <multiselect
                v-model="value1"
                :options="options"
                :multiple="true"
                placeholder="信源类型*(必填,可以填写多个)"
                :class="{
                  'is-invalid': submit && $v.value1.$error,
                }"
              ></multiselect>
              <div v-if="submit && $v.value1.$error" class="invalid-feedback">
                <span v-if="!$v.value1.required">该值是必须选择的。</span>
              </div>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="form-group">
              <label for="price">客户标签</label>
              <multiselect
                v-model="value2"
                :options="options2"
                :multiple="true"
                placeholder="客户标签*(可添加多个)"
              ></multiselect>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label class="control-label">优先级</label>
              <multiselect
                v-model="value3"
                :options="options3"
                placeholder="优先级"
              ></multiselect>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label class="control-label">权重网站</label>
              <b-form-input
                for="text"
                value=""
                placeholder="权重网站"
                trim
              ></b-form-input>
            </div>
          </div>
        </div>
      </div>
      <div class="extend-content">
        <div
          class="form-group"
          style="display: flex; justify-content: space-between"
        >
          <div>
            <!-- <span class="extend-title">扩展信息</span> -->
            <h4 class="card-title">扩展信息</h4>
          </div>
          <div>
            <b-button
              class="btn btn-primary btn-sm"
              variant="success"
              @click="fillExtend"
              >自动填充</b-button
            >
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4">
            <div class="form-group">
              <label for="manufacturername">网站logo</label>
              <b-form-input
                for="text"
                placeholder="网站logo"
                v-model="extendInfo.web"
                trim
              ></b-form-input>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="form-group">
              <label for="manufacturerbrand">信源PR值</label>
              <b-form-input
                for="text"
                v-model="extendInfo.rp"
                placeholder="信源PR值"
                trim
              ></b-form-input>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="form-group">
              <label for="price">主办单位性质</label>
              <b-form-input
                for="text"
                v-model="extendInfo.sponsor"
                placeholder="主办单位性质"
                trim
              ></b-form-input>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label class="control-label">主办单位名称</label>
              <b-form-input
                for="text"
                v-model="extendInfo.sponsorName"
                placeholder="主办单位名称"
                trim
              ></b-form-input>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label class="control-label">所属行业</label>
              <b-form-input
                for="text"
                v-model="extendInfo.industry"
                placeholder="所属行业"
                trim
              ></b-form-input>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4">
            <div class="form-group">
              <label for="manufacturername">主办单位注册地址</label>
              <b-form-input
                for="text"
                v-model="extendInfo.address"
                placeholder="主办单位注册地址"
                trim
              ></b-form-input>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="form-group">
              <label for="manufacturerbrand">归属地</label>
              <b-form-input
                for="text"
                v-model="extendInfo.location"
                placeholder="归属地"
                trim
              ></b-form-input>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="form-group">
              <label for="price">备案号</label>
              <b-form-input
                for="text"
                v-model="extendInfo.record"
                placeholder="备案号"
                trim
              ></b-form-input>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label for="productdesc">备注</label>
          <textarea
            v-model="extendInfo.textarea"
            class="form-control"
            name="textarea"
            rows="6"
            placeholder="备注"
          ></textarea>
        </div>
      </div>
      <div class="form-group mb-0">
        <div style="width: 400px; margin: 0 auto">
          <b-button
            type="submit"
            class="btn btn-primary"
            variant="success"
            @click="makeToast('success')"
            >提交数据</b-button
          >
          <button type="submit" @click="todetail" class="btn btn-primary" style="float: right">
            添加种子
          </button>
        </div>
      </div>
    </form>
  </div>
</template>
<script>
import { required, minLength } from "vuelidate/lib/validators";
import Multiselect from "vue-multiselect";
export default {
  validations: {
    basicContent: {
      name: { required, minLength: minLength(6) },
      address: { required },
    },
    value1: { required },
  },
  components: {
    Multiselect,
  },
  data () {
    return {
      submit: false,
      // 下拉框选项
      options: ["在业/存续", "清算", "迁入", "迁出", "停业", "撤销"],
      options2: ["客户一", "客户二", "客户三"],
      options3: ["高级", "中级", "低级"],
      value1: null,
      value2: null,
      value3: null,
      //扩展信息默认填充
      extendInfo: {
        web: "",
        rp: "",
        sponsor: "",
        sponsorNmae: "",
        industry: "",
        address: "",
        location: "",
        record: "",
        textarea: "",
      },
      // 基本信息
      basicContent: {
        name: "",
        address: "",
      },
    }
  },
  methods: {
    rangeform() {
      this.submit = true;
      // stop here if form is invalid
      this.$v.$touch();
    },
    // 添加信源自动填充
    fillExtend() {
      this.extendInfo.web = "默认logo....";
      this.extendInfo.rp = "默认rp...";
      this.extendInfo.sponsor = "默认主半单位...";
      this.extendInfo.sponsorNmae = "默认主办单位名称...";
      this.extendInfo.industry = "默认行业...";
      this.extendInfo.address = "默认地址...";
      this.extendInfo.location = "默认归属地...";
      this.extendInfo.record = "默认备案号...";
      this.extendInfo.textarea = "默认输入内容......................";
      // this.makeToast('success')
    },
    makeToast(variant = null) {
      // this.$router.push('/seed')
      this.$bvToast.toast("Toast body content", {
        title: `Toast ${variant || "default"}`,
        variant: variant,
        solid: true,
      });
    },
    todetail(){
      this.$router.push('/spider/siteDetail')
    },
  },
}
</script>
<style lang="scss" scoped>
label{
  font-weight: normal;
}
</style>
